<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>

<style>
    .el-input {
        width: 180px;
    }
</style>
<body>
<div id="app">
    <el-form label-width="80px" ref="form" :model="form" :rules="rules">
        <el-form-item label="余额: ">
            {{balance}}
        </el-form-item>

        <el-form-item label="提现金额: " prop="input_balance">
            <el-input v-model="form.input_balance" placeholder="提现金额" oninput = "value=value.replace(/[^\d.]/g,'')"></el-input>
        </el-form-item>

        <el-form-item label="手机号: ">
            <el-input :value="form.phone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="验证码: " prop="verify">
            <el-input v-model="form.verify" placeholder="验证码"></el-input>
            <el-button @click.prevent="sendVerify()">获取验证码</el-button>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即提现</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<div th:include="include::footer"></div>

<script>
    var Main = {
        data() {
            var validatePass = (rule, value, callback) => {
                if (value == '' || parseFloat(value) <= 0) {
                    callback(new Error('请输入正确金额'));
                } else if (parseFloat(value) > parseFloat(this.balance)) {
                    callback(new Error('余额不足'));
                } else {
                    callback();
                }
            };
            return {
                balance: 0.00,

                form: {
                    input_balance: 0,
                    phone: '',
                    verify: '',
                },
                rules: {

                    input_balance: [
                        {validator: validatePass, trigger: 'blur'},
                    ],
                    verify:[
                        { required: true, message: '请填写验证码', trigger: 'blur' }
                    ]
                },


            }
        },
        methods: {
            sendVerify() {
                this.$message('暂未开放，敬请期待');
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$message('暂未开放，敬请期待');
                    } else {

                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created: function () {
            this.balance = [[${user.balance}]];
            this.form.phone=[[${user.phonenumber}]];
        }
    }
    var Ctor = Vue.extend(Main)
    var app = new Ctor().$mount('#app')
</script>
</html>